<script>
import { getMergeInside, getColumnWidth, getRowHeight, numberToExcelColumn, excelAddressToRowCol, rowColToExcelAddress } from './utils.js';
export default {
  props: {
    rows: {
      type: Array,
      default: () => []
    },
    cols: {
      type: Array,
      default: () => []
    },
  },
  computed: {
  },
  methods: {
  },
  render(h) {    
    return h('table', {
      class: 'jtable-grid',
    }, [
      h('tr',
        this.cols.map((col, index) => {
          return h('td', {
            style: {
              width: col.width,
            }
          })
        })),
      this.rows.map((row, rowIndex) => {
        return h('tr', {
          style: {
            height: row.height,
          }
        }, this.cols.map((col, colIndex) => {
          return h('td', {
            on: {
            },
            style: {
              width: this.cols[colIndex].width,
              position: 'relative',
              border: '0.5px solid #e6e6e6',
              borderWidth:`${rowIndex===0?0:1}px ${colIndex===this.cols.length-1?0:1}px ${rowIndex === this.rows.length-1?0:1}px ${colIndex===0?0:1}px`,
              boxSizing:'border-box'
            }
          }, [
          ])
        }));
      })
    ])
  }
}
</script>

<style scoped>
.jtable-grid {
  box-sizing: 'border-box';
  width: fit-content;
}

table {
  margin: 0;
  padding: 0;
  border: none;
  border-collapse: collapse;
  overflow: hidden;
  table-layout: fixed
}

td {
  padding: 0;
  margin: 0;
}
</style>